<!--
 * @Author: MrLee
 * @Date: 2024-08-24 10:32:52
 * @LastEditors: MrLee
 * @LastEditTime: 2024-09-13 17:26:40
 * @Description: 请填写简介
-->
<template>
  <view class="tab-bar flex items-center bg-#fff" :style="{background:background}" :class="classLis">
    <up-tabs
      ref="upTabRef"
      :list="tabList"
      :line-width="lineWidth"
      line-height="4"
      line-color="linear-gradient(90deg,#1f69fb 3%, rgba(83,178,252,0.00) 98%)"
      :active-style="{
        color: '#1664FF',
        fontWeight: 'bold',
        fontSize: fontSize,
        transform: 'scale(1.05)',
      }"
      :inactive-style="{
        color: '#4E5968',
        fontSize: defaultFontSize,
        transform: 'scale(1)',
      }"
      item-style="padding-left: 15px; padding-right: 15px; height: 34px;"
      @change="tabChange"
    >
      <template v-if="rightAction" #right>
        <view class="right-action" @tap="$u.toast('插槽被点击')">
          <view class="iconfont icon-shaixuan" />
          <view class="filter-text">
            筛选
          </view>
        </view>
      </template>
    </up-tabs>
  </view>
</template>

<script lang="ts" setup>
import backend from 'XrFrame/kanata/lib/backend';
const props = defineProps({
  tabList: Array,
  rightAction: {
    type: Boolean,
    default: false,
  },
  classLis:{
    type: String,
    default:''
  },
  fontSize:{
    type:String,
    default:'36rpx'
  },
  defaultFontSize:{
    type:String,
    default:'32rpx'
  },
  background:{
    type:String,
    default:''
  },
});
const upTabRef = ref(null);
const lineWidth = ref<string>(props.tabList[0].activeLineWidth / 2);


const emit = defineEmits(['tabChange'])
function tabChange(e: any, i: number) {
  lineWidth.value = props.tabList[i].activeLineWidth / 2;
  upTabRef.value.init();
  console.log('点击切换了', e)
  emit('tabChange',e)
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: iconfont; /* Project id 4659757 */
  src: url("../../../static/font/iconfont.woff2") format("woff2"),
    url("../../../static/font/iconfont.woff") format("woff"),
    url("../../../static/font/iconfont.ttf") format("truetype");
}

.icon-shaixuan::before {
  content: "\e612";
}

.tab-bar {
  padding-right: 30rpx;
  height: 102rpx;
  line-height: 102rpx;

  .right-action {
    display: flex;
    place-items: center center;
    font-size: 28rpx;

    .icon-shaixuan {
      margin-right: 13rpx;
      font-size: 14px;
      font-family: iconfont,serif;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}
</style>
